<template>
	<div style="margin-top: -10px;">
		<el-divider  />
		<div class="flex flex_b">
			<div class="flex">
				<el-tag v-for="(el,i) in brandList"
				    v-if="el.brand_name"
					style="cursor: pointer;"
					@click="lodeClass(i)"
					:effect="brandIndex==i?'dark':'plain'">
					{{el.brand_name}}
				</el-tag>
				<div style="margin-left: 10px;">
					<el-button icon="el-icon-circle-plus-outline" 
						size="small"
						@click="brandShow=true"
						>
						添加品牌
						</el-button>
				</div>
			</div>
			
			<div>
				<el-switch
				  @change="lodeData"
				  v-model="unpriced">
				</el-switch>
				只看今日未报价
			</div>
		</div>
		<el-divider />
		<div class="flex">
			<el-tag v-for="(el,i) in classList" 
			    v-if="el.class_name"
				style="cursor: pointer;"
				@click="lodeModel(i)"
				:effect="classIndex==i?'dark':'plain'">
				{{el.class_name}}
			</el-tag>
			<div style="margin-left: 10px;">
				<el-button icon="el-icon-circle-plus-outline" 
					size="small"
					@click="serialShow=true"
					>
					添加系列
					</el-button>
			</div>
		</div>
		<el-divider />
		<div class="flex_b">
			<div class="flex">
				<el-tag v-for="(el,i) in modelList"
				    type="success"
					v-if="el.model_name"
					style="cursor: pointer;"
					@click="lodeGoods(i)"
					:effect="modelIndex==i?'dark':'plain'">
					{{el.model_name}}
				</el-tag>
				<div style="margin-left: 10px;">
					<el-button icon="el-icon-circle-plus-outline" 
						size="small"
						@click="modelShow=true"
						>
						添加型号
						</el-button>
				</div>
			</div>
			<div>
				<el-button @click="saveConfirm" :disabled="!ids.length" type="primary" size="mini">一键保存</el-button>
				<el-button @click="onClear" :disabled="!ids.length" type="primary" size="mini">一键清空</el-button>
				<el-button @click="toggleOffer" :type="is_offer?'danger':'success'" size="mini">{{is_offer?'关闭今日未报价':'开启今日未报价'}}</el-button>
				<el-button @click="is_sort=!is_sort" :type="is_sort?'danger':'success'" size="mini">{{is_sort?'关闭排序':"开启排序"}} </el-button>
			</div>
			
		</div>
		<el-divider />
		<el-table
		    :data="goodsList"
		    style="width: 100%"
			border>
			
			<el-table-column label="" align="center" width="70">
				<template slot="header" slot-scope="scope">
				       <div>
						   <el-checkbox v-model="allChecked"></el-checkbox>
					   </div>
				</template>
				<template slot-scope="scope">
				    <div>
						<el-checkbox v-model="scope.row.isSelect"></el-checkbox>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="名称" width="240" prop="con_name" align="center"  />
			<el-table-column label="商品颜色"  align="center" >
			    <template slot-scope="scope">
			        <div class="flex" style="flex-wrap: wrap;justify-content: center;">
						<div v-for="(el,i) in scope.row.children" :key="i">
							<div class="flex" style="margin: 5px 10px;">
								<i @click="sortGoods(el,1,scope,i)" v-if="is_sort" style="cursor: pointer;margin-top: 5px;" class="el-icon-caret-left"></i>
								{{el.goods_color || ''}}
								<input 
									@keyup.enter="updatePrice(el)"
									v-model="el.price" style="width: 50px;" type="text">
								<i @click="sortGoods(el,2,scope,i)" v-if="is_sort" style="cursor: pointer;margin-top: 5px;" class="el-icon-caret-right"></i>
							</div>
						</div>
					</div>
			    </template>
			</el-table-column>
			<el-table-column label="标签一" width="100" prop="tag1" align="center"  />
			<el-table-column label="标签二" width="100" prop="tag2" align="center"  />
			<el-table-column label="操作" align="center" width="120">
			    <template slot-scope="scope">
			        <div>
						<el-button @click="save(scope.row.id)" type="text">保存</el-button>
						<el-button @click="addTag(scope.row)" type="text">内存标签</el-button>
					</div>
			    </template>
			</el-table-column>
			<el-table-column label="更新时间" align="left" width="100">
			    <template slot-scope="scope">
			        <div>
						{{scope.row.update_time.split(' ')[0]}}
						<br />
						{{scope.row.update_time.split(' ')[1]}}
						<br />
						<span v-if="$utils.getDistance(scope.row.update_time)">{{$utils.getDistance(scope.row.update_time)}}前更新</span>
					</div>
			    </template>
			</el-table-column>
		</el-table>	
		<el-dialog
		        title="内存标签"
				:close-on-click-modal="false"
		        :visible.sync="isShow"
		        width="700px"
		>
		  <div>
			  <el-form ref="form" label-width="90px">
				  <el-form-item label="标签一">
						<el-input size="small" v-model="tagInfo.tag1"
						></el-input>
				  </el-form-item>
				  <el-form-item label="标签二">
						<el-input size="small" v-model="tagInfo.tag2"
						></el-input>
				  </el-form-item>
				  <el-form-item label="标签二详情">
						<el-input type="textarea" size="small" 
							placeholder="填公众号链接跳转公众号链接,填文字弹出文字"
							:rows="4"
							v-model="tagInfo.tag2_info"
						></el-input>
				  </el-form-item>
				  <el-form-item >
				      <el-button type="primary" @click="confirm" size="small">确定</el-button>
				  </el-form-item>
			  </el-form>
		  </div>
		</el-dialog>
		<div>
			<addBrand v-if="brandShow" @confirm="confirmAdd"></addBrand>
			<addSerial v-if="serialShow" @confirm="confirmAdd"></addSerial>
			<addModel v-if="modelShow" @confirm="confirmAdd"></addModel>
			
		</div>
	</div>
</template>

<script>
	import addBrand from './components/addBrand.vue'
	import addSerial from './components/addSerial.vue'
	import addModel from './components/addModel.vue'
	export default{
		components:{
			addBrand,addSerial,addModel
		},
		data(){
			return {
				brandShow:false,
				serialShow:false,
				modelShow:false,
				brandList:[],
				classList:[],
				modelList:[],
				goodsList:[],
				brandIndex:1,
				classIndex:0,
				modelIndex:0,
				selectGoods:[],
				unpriced:false,
				is_offer:false, //是否开起今日未报价
				is_sort:false, //是否开启动排序
				ids:[],
				indexs:[],
				allChecked:false,
				tagInfo:{
					tag1:'',
					tag2:'',
					tag2_info:''
				},
				children:[],
				isShow:false
			}
		},
		mounted() {
			
			this.lodeData()
		},
		computed:{
			
		},
		watch:{
			modelList:{
				handler(){
					if(this.modelList.length==0){
						console.log(this.classIndex)
						this.classList.splice(this.classIndex,1)
						this.brandList.splice(this.brandIndex,1)
						this.brandIndex = -1
						this.goodsList = []
					}
				}
			},
			allChecked:{
				handler(newVal){
					this.goodsList.forEach((item)=>{
						item.isSelect = newVal
					})
				}
			},
			goodsList:{
				handler(newVal){
					let bool = true
					let ids = []
					this.indexs = []
					
					newVal.forEach((item,i)=>{
						if(item.isSelect == false){
							bool = false
						}else{
							ids.push(item.id)
							this.indexs.push(i)
						}
					})
					
					this.ids = ids
					this.allChecked = bool
				},
				deep:true
			}
		},
		methods:{
			confirmAdd(){
				this.brandShow = false
				this.serialShow = false
				this.modelShow = false
				this.lodeData()
			},
			confirm(){
				
				let ids = this.children.map(item=>{
					return item.goods_id
				})
				console.log(ids)
				console.log(this.tagInfo)
				let params = {
					goodsIds:ids,
					...this.tagInfo
				}
				this.$post('/prodectSys/setMemoryTag',params,res=>{
					this.isShow = false
					this.$message.success('操作成功')
					this.lodeData(2)
				})
			},
			addTag(row){
				 this.tagInfo.tag1 = row.children[0].tag1
				 this.tagInfo.tag2 = row.children[0].tag2
				 this.tagInfo.tag2_info = row.children[0].tag2_info
				 this.children = row.children
				 this.isShow = true
			},
			updatePrice(ele){
				let arr = [
					{
						goods_id:ele.goods_id,
						price:ele.price,
						old_price:ele.old_price
					}
				]
				this.$post('/prodectSys/updateGoodsPrice',{goods_price:arr},res=>{
					if(res.data.code==200){
						this.$message.success('操作成功')
						// this.lodeData()
					}
				})
			},
			save(id){
				this.ids = [id]
				this.saveConfirm()
			},
			saveConfirm(){
				if(this.ids.length == 0) return this.$message.error('请选择数据')
				let arr = []
				for(let item of this.ids){
					let index = this.goodsList.findIndex((el,i)=>{
						return el.id == item
					})
					let goods = this.goodsList[index].children.map(ele=>{
						return {
							goods_id:ele.goods_id,
							price:ele.price,
							old_price:ele.old_price
						}
					})
					arr.push(...goods)
				}
				
				this.$post('/prodectSys/updateGoodsPrice',{goods_price:arr},res=>{
					if(res.data.code==200){
						this.$message.success('操作成功')
						this.lodeData(2)
					}
				})
			},
			onClear(){
				let arr = this.goodsList.filter((el)=>{
					return el.isSelect
				})
				for(let item of this.goodsList){
					if(item.isSelect){
						for(let ele of item.children){
							ele.price = ''
						}
					}
				}
				
			},
			sortGoods(el,type,scope,ind){
               
				if(this.ids.length==0) return this.$message.error('请选择商品')
				
				
				let index = scope.$index
				let colorArr = this.goodsList[index].children
				// type 1 上 2 下
				let len = colorArr.length - 1
				if(ind==0 && type==1) return this.$message.error('已经在最左边了')
				if(ind==len && type==2) return this.$message.error('已经在最右边了')
				
				let arrIndex = []
				
			
				
				this.goodsList.forEach((item,i)=>{
					if(item.isSelect){
						arrIndex.push(i)
					}
				})
			
				for(let i=0;i<arrIndex.length;i++){
					this.sortGoodsConfirm(type,arrIndex[i],ind)
				}
				
			},
			sortGoodsConfirm(type,i,ind){
			
				let colorArr = this.goodsList[i].children
				// // type 1 上 2 下
				// let len = colorArr.length - 1
				// if(ind==0 && type==1) return this.$message.error('已经在最左边了')
				// if(ind==len && type==2) return this.$message.error('已经在最右边了')
				 
				 let sort
				 let sort1
				 let subtract
				 let params = {
					 
				 }
				 if(type==1){ // 1上
					sort = colorArr[ind].color_sort
					sort1 = colorArr[ind-1].color_sort
					
					params.sort = sort
					params.sort1 = sort1
					params.goods_id = colorArr[ind-1].goods_id
					params.goods_id1 = colorArr[ind].goods_id
					
				 }else{  // 2下
					 sort =  colorArr[ind].color_sort
					 sort1 = colorArr[ind+1].color_sort
					 
					 params.sort = sort
					 params.sort1 = sort1
					 params.goods_id = colorArr[ind+1].goods_id
					 params.goods_id1 = colorArr[ind].goods_id
					 
				 }
			
				 this.$post('/prodectSys/colorSort',params,res=>{
					 
					 this.lodeGoods(this.modelIndex)
					 
				 })
			},
			sortGoods1(el,type,scope,ind){
				let i = scope.$index
				let colorArr = this.goodsList[i].children
				// type 1 上 2 下
				let len = colorArr.length - 1
				if(ind==0 && type==1) return this.$message.error('已经在最左边了')
				if(ind==len && type==2) return this.$message.error('已经在最右边了')
				 
				 let sort
				 let sort1
				 let subtract
				 if(type==1){ // 1上
					sort = colorArr[ind].color_sort
					sort1 = colorArr[ind-1].color_sort
					subtract = sort1 - sort
					if(sort == sort1){
						sort++
					}else{
						sort+=subtract
						sort++
					}
				 }else{  // 2下
					 sort =  colorArr[ind].color_sort
					 sort1 = colorArr[ind+1].color_sort
					 console.log(sort,sort1)
					 subtract = sort - sort1
					 if(sort == sort1){
					 	sort--
					 }else{
					 	sort-=subtract
					 	sort--
					 }
				 }
				 let params = {
					 sort:sort,
					 goods_id:el.goods_id
				 }
				 this.$post('/prodectSys/colorSort',params,res=>{
					 this.lodeGoods(this.classIndex)
				 })
				 
			},
			toggleOffer(){
				this.is_offer = !this.is_offer
				
				
				this.lodeGoods(this.modelIndex)
			},
			handleSelectionChange(val){
				this.selectGoods = val
				
				this.indexs = []
				this.goodsList.forEach((item,i)=>{
					for(let ele of this.selectGoods){
						if(item.id==ele.id){
							item.isSelect = true
							this.indexs.push(i)
						}else{
							item.isSelect = false
						}
					}
				})
				
				this.ids = val.map(item=>{
					return item.id
				})
				
				
				
			},
			lodeData(type=1){
				let params = {
					table_name:"hs_brand",
					status:1,
					unpriced:this.unpriced
				}
				this.$post('/prodectSys/getBrandListNoPage',params,res=>{
					res.data.data = res.data.data.filter(item=>{
						return item.is_show == 1
					})
					
					res.data.data.forEach((item,i)=>{
						if(type==1){
							if(item.is_default==1){
								this.brandIndex = i
							}
						}
					})
					this.brandList = res.data.data
					
					if(this.brandList.length){
						this.lodeClass(this.brandIndex,type)
					}else{
						this.goodsList = []
					}
					
				})
			},
			lodeClass(i,type=1){
				this.brandIndex = i
				let param = {
					table_name:"hs_class",
					brand_name:this.brandList[this.brandIndex].brand_name,
					status:1,
					unpriced:this.unpriced
				}
				this.$post('/prodectSys/getBrandListNoPage',param,res=>{
					
					res.data.data = res.data.data.filter(item=>{
						return item.is_show == 1
					})
					
					this.classList = res.data.data
					if(res.data.data.length){
						if(type==2){
							if(this.classIndex>res.data.data.length-1){
								this.classIndex = 0
							}
						}else{
							this.classIndex = 0
						}
						this.lodeModel(this.classIndex,type)
					}else{
						this.goodsList = []
						this.modelList = []
					}
				})
			},
			lodeModel(i,type=1){
				this.classIndex = i
				let params = {
					table_name:"hs_model",
					brand_name:this.brandList[this.brandIndex].brand_name,
					class_name:this.classList[this.classIndex].class_name,
					status:1,
					unpriced:this.unpriced
				}
				this.$post('/prodectSys/getBrandListNoPage',params,res=>{
					res.data.data = res.data.data.filter(item=>{
						return item.is_show == 1
					})
					this.modelList = res.data.data
					if(res.data.data.length){
						if(type==2){
							if(this.modelIndex>res.data.data.length-1){
								this.modelIndex = 0
							}
						}else{
							this.modelIndex = 0
						}
						this.lodeGoods(this.modelIndex)
					}else{
						this.modelList = []
					}
				})
			},
			lodeGoods(i){
				this.modelIndex = i
				let params = {
					brand_name:this.brandList[this.brandIndex].brand_name,
				    class_name:this.classList[this.classIndex].class_name,
					model_name:this.modelList[this.modelIndex].model_name,
					is_offer:'',
					unpriced:this.unpriced
				}
				
				this.$post('/prodectSys/lodeQuotationNoPage',params,res=>{
					let result = res.data.data
					for(let item of result){
						item.price = this.$utils.removeChinese(item.price)
						item.brand = item.brand || ''
						item.cate = item.cate.replace('系列','') || ''
						item.goods_weight = item.goods_weight || ''
						item.con_name = item.brand+item.goods_type+' '+item.goods_weight
						item.type_name = item.brand+item.goods_type
						item.old_price = item.price
					}
					
					let arr = []
					
					for(let i in result){
						let ind = arr.findIndex((ele)=>{
							return ele.con_name == result[i].con_name
						})
						if(ind==-1){
							let obj = {
								con_name:result[i].con_name,
								type_name:result[i].type_name,
								tag1:result[i].tag1,
								tag2:result[i].tag2,
								children:[result[i]],
								isSelect:false,
								update_time:result[i].update_time
							}
							arr.push(obj)
						}else{
							arr[ind].children.push(result[i])
						}
					}
					
					for(let i in arr){
						arr[i].id = i
					}
					
					for(let item of arr){
						item.children.forEach((el,i)=>{
							if(el.color_sort==0){
								el.color_sort = i+1
							}
						})
					}
					
					for(let item of arr){
						item.children.sort(function(a,b){
							if(a.color_sort==b.color_sort){
								return b.id - a.id
							}
							    return b.color_sort - a.color_sort
						})
					
					}
					if(this.is_offer){
						arr = arr.filter((item,i)=>{
							let bool = this.$utils.getDistance(item.update_time,2)
							return !bool
						})
					}
					
					this.goodsList = arr
					for(let i of this.indexs){
						if(this.goodsList[i]){
							 this.goodsList[i].isSelect = true
						}
					}
					
				})
			},
		}
		
	}
</script>

<style>
	.el-divider{
		margin: 15px 0;
	}
	input{
		outline: none;
	}
</style>